<template>
	<div class="bg-white px-3" style="margin: -20px;margin-top: -1rem;margin-bottom: 0 !important;">

		<button-search class="pt-3" >
			<template #left>
				<el-button size="mini" type="success"
				@click="openCreateModel(false)">添加等级</el-button>
			</template>
			<template #right>
				<div>
					<small class="mr-2">选择升级的标准</small>
					<el-radio-group v-model="level" size="mini">
						<el-radio-button  type="primary" label="0" >累计消费</el-radio-button>
						<el-radio-button  type="primary" label="1" >累计次数</el-radio-button>
					</el-radio-group>
				</div>
			</template>
		</button-search>
		
		<!-- 商品列表 -->
		<el-table border class="mt-3" :data="tableData" style="width: 100%">
			<el-table-column label="等级名称" width="250" prop="name">
				
			</el-table-column>
			<el-table-column label="升级条件" align="center" width="150">
				<template slot-scope="scope">
					{{getLevel.name + ':' + scope.row[getLevel.value]}}
				</template>
			</el-table-column>
			<el-table-column prop="discount" label="折扣率%" align="center" width="250">
				
			</el-table-column>
		
			<el-table-column label="等级序号" align="center" prop="level">
				
			</el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<el-button :type="scope.row.status ? 'success' : 'danger'" size="mini" plain
					@click="changeStatus(scope.row)">
						{{scope.row.status ? '启用' : '禁用'}}
					</el-button>
				</template>
			</el-table-column>
			
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-button type="text" size="mini"
					@click="openCreateModel(scope)">修改</el-button>
					<el-button type="text" size="mini"
					@click="deleteItem(scope.row)">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div style="height: 60px;"></div>
		<el-footer class="d-flex border-top align-items-center px-0 position-fixed bg-white" style="bottom: 0;left: 200px;right: 0;z-index: 10;">
			<div class="px-2" style="flex: 1;">
				<el-pagination
				 @size-change="handleSizeChange" 
				 @current-change="handleCurrentChange" 
				 :current-page="page.current"
				 :page-sizes="page.sizes" 
				 :page-size="page.size" 
				 layout="total, sizes, prev, pager, next, jumper" 
				 :total="page.total">
				</el-pagination>
			</div>
		</el-footer>

		<!-- 添加类型 model -->
		<el-dialog :title="editIndex === -1 ? '添加等级' : '修改等级'" :visible.sync="showCreateModel" top="5vh" width="80%">
			<el-form ref="form" :model="form" label-width="80px" >
				
				<el-form-item label="等级名称" prop="name" >
					<el-input v-model="form.name"
					placeholder="等级名称" size="mini"
					style="width: 25%;"
					></el-input>
					<small class="text-secondary d-block" style="line-height: 1;">设置等级名称</small>
				</el-form-item>
				<el-form-item label="等级权重" prop="level">
					<el-input v-model="form.level" type="number"
					placeholder="等级权重" size="mini"
					style="width: 25%;"></el-input>
					<small class="text-secondary d-block" 
					style="line-height: 1;">
						设置会员等级排序(此参数决定等级的高低，排序越大等级越高，请谨慎选择)
					</small>
				</el-form-item>
				<el-form-item label="是否启用" prop="status">
					<el-switch v-model="form.status"
					:active-value="1" :inactive-value="0"></el-switch>
				</el-form-item>
				<el-form-item label="升级条件" >
					<div >
						<small>累计消费满</small>
						<el-input class="ml-2" type="number" v-model="form.max_price"
						placeholder="累计消费" size="mini" style="width: 25%;">
							<template slot="append">元</template>
						</el-input>
						<small class="text-secondary ml-2"
						style="line-height: 1;">
							设置会员等级所需的累计消费必须大于等于0，单位元
						</small>
					</div>
					<div>
						<small>累计次数满</small>
						<el-input class="ml-2" type="number" v-model="form.max_times"
						placeholder="累计次数" size="mini" style="width: 25%;">
							<template slot="append">次</template>
						</el-input>
						<small class="text-secondary ml-2"
						style="line-height: 1;">
							设置会员等级所需的累计消费次数必须大于等于0，单位笔
						</small>
					</div>
				</el-form-item>
				<el-form-item label="折扣率">
					<el-input v-model="form.discount" type="number"
					placeholder="折扣率" size="mini"
					style="width: 25%;">
						<template slot="append">%</template>
					</el-input>
					<small class="text-secondary d-block"
					style="line-height: 1;">
						折扣率单位为百分比，如输入90，表示该会员等级的用户可以以商品原价的90%购买
					</small>
				</el-form-item>
				
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="showCreateModel = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import buttonSearch from "@/components/common/button-search.vue"
	import common from "@/common/mixins/common.js";

	export default {
		
		mixins:[common],
		
		inject: ['app', 'layout'],
		
		components: {
			buttonSearch,
		},
		
		computed: {
			getLevel() {
				let arr = [
					{name: '累计消费', value: 'max_price'}, 
					{name: '累计次数', value: 'max_times'},
				]
				return arr[this.level]
			}
		},

		data() {
			return {
				preUrl: 'user_level',
				
				level: 0,
				//搜索条件
				search: {
					keyword: '',
					group_id: '',
					time: '',
				},
				
				form: {
					name:'',
					max_price: 0,
					max_times: 0,
					discount: 0,
					level: 0,
					status: 1,
					
				},
				
				//当前编辑的索引
				editIndex: -1,
	
				tableData: [],

				//是否显示添加规格model
				showCreateModel: false
			}
		},
		

		methods: {
			
			getListResult(e) {
				this.tableData = e.list
			},
			
			//选择图片
			chooseImage() {
				this.app.showImageModel((res) => {
					this.form.avatar = res[0].url
				}, 1)
			},
			
			//清空搜索条件
			clearSearch() {
				this.form = {
					keyword: '',
					group_id: '',
					time: '',
				}
				this.$refs.buttonSearch[this.tabIndex].closeSuperSearch()
			},
			//搜索事件
			searchEvent(e = false) {
				if (typeof e === 'string') {
					return console.log('简单搜索事件',e)
				} 
				console.log('高级搜索', e)
			},
		
			//打开新增规格model
			openCreateModel(e = false) {
				if (!e) { //增加
					this.form = {
						name:'',
						max_price: 0,
						max_times: 0,
						discount: 0,
						level: 0,
						status: 1,
					}
					this.editIndex = -1
				} else {
					this.form = {...e.row}
					this.editIndex = e.$index
				}
				
				this.showCreateModel = true
			},
			
			//submit 添加类型
			submit() {
				this.$refs['form'].validate(res => {
					if (res) {
						let id = 0
						if (this.editIndex !== -1) {
							id = this.tableData[this.editIndex].id
						} 
						this.addOrEditPromise(this.form, id)
						.then(res => {
							this.showCreateModel = false
						}).catch(err => {
							console.log(err)
						})
					}
				})
				
			},
			
			//分页方法
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},

		}
	}
</script>

<style>
.sku-list-item>i{
	display: none;
}
.sku-list-item:hover{
	background-color: #f4f4f4;
	cursor: pointer;
}	
.sku-list-item:hover>i{
	display: inline-block;
}
.sku-list-item:hover>font{
	display: none;
}
</style>
